<script setup lang="ts">
import { menuRoute } from './composables/menuRoute'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
/**回到首页 */
const gotoHome = () => {
  router.push('/home')
}
// 菜单导航高亮
const routePath = (path: string) => {
  let active = ''
  const arr = menuRoute.map((item) => item.index)
  arr.forEach((item) => {
    if (path.includes(item)) {
      active = item
    }
  })
  return active
}
/** 点击菜单导航 */
const gotomenuRoute = ($event: MouseEvent) => {
  const tage: HTMLElement = $event.target as HTMLElement
  const parentNode: HTMLElement = tage.parentNode as HTMLElement
  if (tage && tage.dataset.path) {
    router.push({
      path: tage.dataset.path,
      query: {
        code: route.query.code,
      },
    })
  } else if (parentNode && parentNode.dataset.path) {
    router.push({
      path: parentNode.dataset.path,
      query: {
        code: route.query.code,
      },
    })
  }
}
</script>

<template>
  <!-- 会员中心 -->
  <el-container>
    <el-aside width="200px">
      <!-- 展示栏 -->
      <div class="hurdle">
        <svg-icon class="home" name="shouye" color="#c6c6c6" @click="gotoHome"></svg-icon>
        <p>
          <span>/</span>
          会员中心
        </p>
      </div>
      <el-menu :default-active="routePath($route.path)" @click="gotomenuRoute">
        <el-menu-item :index="item.index" v-for="(item, index) in menuRoute" :key="index" :data-path="item.path">
          <svg-icon :name="item.icon" />
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <!-- 路由组件展示区 -->
      <RouterView />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.hurdle {
  display: flex;
  padding-left: 20px;
  align-items: end;
  height: 50px;
  font-size: 14px;
  color: #c6c6c6;
  .home {
    cursor: pointer;
  }
  p {
    span {
      margin: 0 5px;
    }
  }
}
.el-menu {
  .el-menu-item {
    span {
      margin-left: 5px;
    }
  }
}
:deep(.el-main) {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
